<template>
  <div class="md-manage-zheng-shu">
    <div class="pic-box">
      <p>恭喜您获得酷学证书！</p>
      <div class="img-box" @mouseenter="isMaskShow = true" @mouseleave="isMaskShow = false">
        <img src="../../../assets/img/zhengshu.png" alt="">
        <div class="mask" v-show="isMaskShow">
          <i class="el-icon-zoom-in" @click="check"></i>
        </div>
      </div>
    </div>
    <el-dialog
      title="酷学证书"
      :visible.sync="dialogVisible"
      width="500px">
      <img class="provide-img" src="../../../assets/img/zhengshu.png" alt="">
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MdManageZhengShuComponent',
  data () {
    return {
      isMaskShow: false,
      dialogVisible: false
    }
  },
  methods: {
    check () {
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="less" scoped>
.md-manage-zheng-shu {
  width: 100%;
  background: #fff;
  .pic-box {
    height: 300px;
    p {
      font-size: 14px;
      color: #333;
      margin-bottom: 20px;
    }
    .img-box {
      width: 200px;
      position: absolute;
      img {
        width: 100%;
      }
      .mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        i {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 20px;
          padding: 5px;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .provide-img {
    width: 450px;
    margin: 0 auto;
  }
}
/deep/ .el-dialog__body {
  padding: 20px;
  display: flex;
  justify-content: center;
}
</style>